<!-- 综合查询/面单余额 -->
<template>
  <div class="container">
    <vxe-toolbar custom export :refresh="{query: findList}">
      <template v-slot:buttons>
        <el-button @click="findList">查询</el-button>
        <el-button @click="handleClick('add')">新增</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      border
      highlight-hover-row
      show-overflow
      resizable
      max-height="760"
      align="center"
      :loading="loading"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="sourcePlatformName" title="平台类型" min-width="150" sortable show-header-overflow show-overflow />
        <template #header>
          <el-select v-model="listQuery.sourcePlatformCode" placeholder="请选择" @change="changePlatformType" clearable>
            <el-option
              v-for="item in platformTypeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="outerName" title="承运商" min-width="150" sortable show-header-overflow show-overflow />
        <template #header>
          <el-select v-model="listQuery.outerCode" placeholder="请选择" clearable>
            <el-option
              v-for="item in carrierManagement"
              :key="item.code"
              :label="item.name+(item.branchCode)"
              :value="item.code"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column field="branchName" title="网点名称" min-width="150" sortable/>
      <vxe-table-column field="branchCode" title="网点编码" min-width="150" sortable/>
      <vxe-table-column field="quantity" title="余额" min-width="150" sortable/>
      <vxe-table-column field="allQuantity" title="充值数" min-width="150" sortable/>
      <vxe-table-column field="allocatedQuantity" title="取号数" min-width="150" sortable/>
      <vxe-table-column field="cancelQuantity" title="回收数" min-width="150" sortable/>
      <vxe-table-column field="addressDto" title="发货地址" min-width="360" sortable/>
      <vxe-table-column field="remarks" title="备注" min-width="150" sortable/>
      <vxe-table-column>
        <vxe-table-column field="createdName" title="创建人" min-width="150" sortable/>
        <template #header>
          <el-input v-model="listQuery.createdName" placeholder="请输入创建人" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="gmtCreated"
          title="创建日期"
          min-width="280"
          sortable
          show-header-overflow
          show-overflow
        />
        <template #header>
          <el-date-picker
            v-model="gmtCreatedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            style="width:100%"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="(value) => changeDate(value, 'gmtCreated')"
          />
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" fixed="right" width="140">
        <template slot-scope="{ row }">
          <el-tooltip content="编辑" placement="top">
            <vxe-button type="text" icon="el-icon-edit" @click="handleClick('edit', row.code)" />
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <vxe-button type="text" icon="el-icon-delete" @click="handleDelClick(row.code)" />
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-modal
      v-model="modelAED"
      :title="operationTitle"
      width="500"
      resize
      destroy-on-close
    >
      <addEditOperation
        :operation-type="operationType"
        :operation-code="operationCode"
        @operationComplete="
          handleClick()
          findList()
        "
      />
    </vxe-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, {mounts: ['cookie']})

import { getDictList } from '@/api/basicInfo'
import { getmanifestBalanceList, manifestBalanceDel } from '@/api/comprehensive/manifestBalance'
import addEditOperation from './components/addEdit.vue'
export default {
  name: 'ManifestBalance',
  components: { addEditOperation },
  data () {
    return {
      loading: false,
      operationType: '', // 操作类型
      operationTitle: '', // 操作类型标题
      operationCode: '', // 修改、详情，数据的id
      modelAED: false, // 添加、编辑、查看，遮罩开关
      listQuery: {
        sourcePlatformCode: '',
        outerCode: ''
      },
      platformTypeList: [], // 平台类型
      carrierManagement: [],
      tableData: [],
      gmtCreatedRange: ''
    }
  },
  async created() {
    await getDictList('salePlatform').then(res=>{
      this.platformTypeList = res.data[0].dictList
    })
    this.findList()
  },
  methods: {
    findList (event) {
      if (!event) {
        this.gmtCreatedRange = ''
        this.listQuery = this.$options.data().listQuery
      }
      this.loading = true
      return getmanifestBalanceList(this.listQuery).then(res => {
        this.tableData = res.data
        this.loading = false
      })
    },
    changePlatformType(code) {
      this.listQuery.outerCode = ''
      getDictList(code).then(res=>{
        this.carrierManagement = res.data[0].dictList
      })
    },
    // 添加/编辑/查看 开关遮罩等操作
    handleClick(type, code) {
      this.modelAED = !this.modelAED
      if (type) {
        this.operationType = type
        this.operationTitle = this.getEnumsOrDict('dict', 'operation').get(type)
      }
      if (code) {
        this.operationCode = code
      }
    },
    // 删除方法
    handleDelClick(code) {
      this.$confirm('确认删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          manifestBalanceDel(code).then((res) => {
            this.$message({ dangerouslyUseHTMLString: true, message: res.msg, type: 'success' })
            this.findList()
          })
        })
        .catch(() => {})
    },
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0] + " 00:00:00";
        this.listQuery[`${prefix}End`] = value[1] + " 23:59:59";
      } else {
        this.listQuery[`${prefix}Start`] = "";
        this.listQuery[`${prefix}End`] = "";
      }
    },
  }
}
</script>
<style scoped>
.container{
  padding: 15px
}
</style>
